<script setup>
import { defineProps, ref } from 'vue';
import router from '../../router/router';

defineProps({
  navBars: {
    type: Array,
    default: () => []
  }
})

// 根据url的名称改变当前侧边栏item的样式
const currentPath = ref(localStorage.getItem("fullPath"))

// 监听路由发生改变时，获取到最新的fullPath的值
router.beforeEach(() => {
  currentPath.value = localStorage.getItem("fullPath");
})

const changeRouter = (event, path) => {
  router.push(path);
}



</script>

<template>
  <div class="asideNavBar">
    <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        text-color="#fff"
    >
      <template v-for="(item, index) of navBars" :key="index">
        <el-menu-item           
          @click="changeRouter(event, item.path)"
          :class="item.path === currentPath ? 'active': ''"
          :index="item.path"
        >
          <el-icon>
            <component :is="item.component"></component>
          </el-icon>
          <span>{{ item.title }}</span>
        </el-menu-item>
        <el-sub-menu index="1-4" v-if="item.children?.length">
            <template #title>{{ item.title }}</template>
            <template v-for="(iten, indey) of item.children" :key="indey">
              <el-menu-item :index="String(indey)">{{ iten.title }}</el-menu-item>
            </template>
        </el-sub-menu>
      </template>
    </el-menu>
  </div>
</template>

<style scoped lang="less">
.active {
  color: rgb(244, 208, 5);
}
</style>